<template>
  <div class="list_page">
    <div class="export_btn">
      <el-button
        icon="el-icon-download"
        :loading="export_status"
        @click="export_cli"
        >导出</el-button
      >
    </div>
    <div class="result_box">
      <div class="finish">
        <el-image lazy :src="f_img"></el-image>
        <div class="f_text">
          <div class="num">{{ resultNum.ypj }}</div>
          <div class="text">已评价</div>
        </div>
      </div>
      <div class="unfinish">
        <el-image lazy :src="unf_img"></el-image>
        <div class="unf_text">
          <div class="num">{{ resultNum.dpj }}</div>
          <div class="text">待评价</div>
        </div>
      </div>
    </div>
    <div class="table_box">
      <div class="search_box">
        <div class="left_item">
          <div class="search_item">
            <div class="search_item_top">单位名称</div>
            <div class="search_item_bottom">
              <el-input v-model="formData.name"></el-input>
            </div>
          </div>
          <!-- <div class="search_item">
            <div class="search_item_top">评价表名</div>
            <div class="box_search_item_bottom">
              <el-input v-model="formData.tableName"></el-input>
            </div>
          </div> -->
          <!-- <div class="search_item">
            <div class="search_item_top">评价状态</div>
            <div class="box_search_item_bottom">
              <el-select
                class="status_sel"
                v-model="formData.status"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="(item, index) in ratingList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  class="stat_option"
                ></el-option>
              </el-select>
            </div>
          </div> -->
        </div>
        <div class="right_item">
          <el-button
            class="search_btn"
            type="primary"
            icon="el-icon-search"
            @click="query()"
            >查询</el-button
          >
          <!-- :loading="search_status" -->
          <el-button icon="el-icon-refresh" class="reset_btn">重置</el-button>
        </div>
      </div>
      <el-table
        class="table_item"
        :data="tableData"
        style="width: 100%"
        height="56.25vh"
        header-row-class-name="header_item"
        stripe
        v-loading="search_status"
      >
        <el-table-column align="center" type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column align="left" prop="zjt_name" label="子集团">
        </el-table-column>
        <el-table-column align="center" prop="org_name" label="单位名称(代号)">
        </el-table-column>
        <el-table-column
          align="center"
          prop="involve_condition"
          label="涉H情况"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="workshop_name"
          label="分厂/车间名称及编号"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="process_type"
          label="主要工艺类型"
        >
        </el-table-column>
        <el-table-column align="center" prop="work_type" label="工作方式">
        </el-table-column>
        <el-table-column align="center" prop="development">
          <template #header>
            <div class="header_title">开展情况</div>
            <div>(已完成/总计)</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="result_condition">
          <template #header>
            <div class="header_title">结果统计</div>
            <div>(合格/不合格)</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              class="edit_btn"
              size="mini"
              @click="detail_cli(scope.row)"
              >去检查</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagi_box">
        <el-pagination
          background
          :page-sizes="[10, 30, 50]"
          :current-page="page.pageIndex"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, sizes, jumper"
          :total="page.totals"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import finish_IMG from "@/assets/image/finish_img.png";
import unfinish_IMG from "@/assets/image/unfinish_img.png";
import { addSql, createTableSql, selectSql, updateSql } from "@/js/uniBridge";
export default {
  data() {
    return {
      f_img: finish_IMG,
      unf_img: unfinish_IMG,
      export_status: false,
      search_status: false,
      totals: 0,
      formData: {
        name: "",
        tableName: "",
        status: "",
      },
      resultNum: { ypj: 0, dpj: 0 },
      ratingList: [
        { label: "合格", value: 1 },
        { label: "不合格", value: 2 },
        { label: "不涉及", value: 3 },
      ],
      page: { currentSize: 0, pageIndex: 1, pageSize: 10, totals: 0 },
      tableData: [
        // {
        //   id: 6,
        //   zjt_name: "信息中心",
        //   org_name: "通达公司",
        //   involve_condition: "非",
        //   workshop_name: "6所",
        //   process_type: "代码研发",
        //   work_type: "厂及现场检查",
        //   development: "0/504",
        //   result_condition: "0/0",
        //   expert_name: "付存宰",
        //   begin_date: "2022-01-26",
        //   end_date: "2018-08-18",
        // },
      ],
    };
  },
  created() {
    this.query();
    this.queryNum();
  },

  methods: {
    // 处理消息接收
    createTable() {
      createTableSql(
        "CREATE TABLE IF NOT EXISTS user_sql (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT(255) NOT NULL, age INTEGER, price INTEGER, description TEXT(255), createdDate TEXT(255))"
      )
        .then((res) => {
          console.log("createTable", res);
          this.uni_msg = JSON.stringify(res);
        })
        .catch((err) => {
          console.error("createTable失败", err);
        });
    },
    query(type) {
      // this.queryNum();
      if (type != "page") {
        this.page.pageIndex = 1;
        this.page.currentSize = 0;
      }
      this.page.currentSize = (this.page.pageIndex - 1) * this.page.pageSize;
      this.search_status = true;
      let sql = `select id,zjt_name,org_name,involve_condition,workshop_name,process_type,work_type,ifNull(r1.num,0) || '/' || ((select count(*) from sc_judge) - ifNull(r4.num,0)) as development,ifNull(r2.num,0) || '/' || ifNull(r3.num,0) as result_condition,expert_name,begin_date,end_date
            from sc_workshop w left join (
            select workshop_id,count(*) as num from sc_judge_result where judge_result != '3' group by workshop_id
            ) r1 on w.id = r1.workshop_id 
            left join (
            select workshop_id,count(*) as num from sc_judge_result where judge_result = '1' group by workshop_id
            ) r2 on w.id = r2.workshop_id
            left join (
            select workshop_id,count(*) as num from sc_judge_result where judge_result = '2' group by workshop_id
            ) r3 on w.id = r3.workshop_id
            left join (
            select workshop_id,count(*) as num from sc_judge_result where judge_result = '3' group by workshop_id
            ) r4 on w.id = r4.workshop_id
            where w.org_name like '%${this.formData.name}%'
            limit ${this.page.currentSize},${this.page.pageSize}`;
      selectSql(sql)
        .then((res) => {
          this.search_status = false;
          // 表格数据

          this.tableData = res;
          // this.page.totals = this.tableData.length;
          console.log("tableeeeee", this.tableData);
        })
        .catch((err) => {
          this.search_status = false;
          console.error("selectSql失败", err);
        });
      // 获取总条数
      this.totalHandle();
    },
    totalHandle() {
      let sql = `select count(*) as total
            from sc_workshop w where w.org_name like '%${this.formData.name}%'`;
      selectSql(sql).then((res) => {
        // 表格数据
        console.log("总条数", res);

        this.page.totals = res[0].total;
      });
    },
    export_cli() {
      this.export_status = true;
      setTimeout(() => {
        this.export_status = false;
      }, 1000);
    },
    detail_cli(row) {
      this.$router.push({
        path: `/details/${row.id}`,
        query: row,
      });
    },
    // 查询数量
    queryNum() {
      let sql = `select sum(a) ypj,sum(b) as dpj from (
          select ifNull(r1.num,0) as a, ((select count(*) from sc_judge) - ifNull(r4.num,0)) as b
          from sc_workshop w left join (
          select workshop_id,count(*) as num from sc_judge_result where judge_result != '3' group by workshop_id
          ) r1 on w.id = r1.workshop_id 
          left join (
          select workshop_id,count(*) as num from sc_judge_result where judge_result = '3' group by workshop_id
          ) r4 on w.id = r4.workshop_id
          )`;
      selectSql(sql)
        .then((res) => {
          // let arr =  res;
          //  this.resultNum = { ypj: 2, dpj: 56454654 };
          this.resultNum = res[0];
          console.log("selectSql数量11", this.resultNum);
          // 表格数据
        })
        .catch((err) => {
          console.error("selectSql失败", err);
        });
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.query("page");
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.query("page");
    },
  },
};
</script>
<style  lang="scss" >
</style>
<style lang="scss" scoped>
// #E8F4FF
// height: 100vh;
.list_page {
  height: 100vh;
  // padding: 16px 16px 0;
  // padding: 32px 32px 0;
  padding: (32 / 1600) * 100vh (32 / 2560) * 100vw 0;
  background: #d9d9d9;
  .stat_option {
    font-size: 2rem !important;
  }
  /deep/ .el-select-dropdown__item {
    height: 4.25rem;
    line-height: 4.25rem;
  }
  /deep/.el-icon-arrow-up {
    // font-size: 28px;
    font-size: (28 / 2560) * 100vw;
  }
  .export_btn {
    // padding: 32px 0 16px 0;
    .el-button {
      // width: 84px;
      // height: 32px;
      // width: 168px;
      // height: 64px;
      width: (168 / 2560) * 100vw;
      height: (64 / 1600) * 100vh;
      // font-size: 16px;
      // font-size: 32px;
      font-size: (32 / 2560) * 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      // border-radius: 72px;
      border-radius: (72 / 2560) * 100vw;
      background: #1890ff;
      color: #fff;
    }
  }
  .result_box {
    width: 100%;
    // height: 75px;
    // height: 150px;
    height: (150 / 1600) * 100vh;
    display: flex;
    justify-content: center;
    // margin-top: 8px;
    // margin-top: 16px;
    margin-top: (16 / 1600) * 100vh;
    // border-radius: 5px;
    // border-radius: 10px;
    border-radius: (10 / 2560) * 100vw;
    background: linear-gradient(#e8f4ff, #fff);
    .el-image {
      // width: 40px;
      // height: 40px;
      // width: 80px;
      // height: 80px;
      width: (80 / 2560) * 100vw;
      height: (80 / 1600) * 100vh;
      .el-image__inner {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      // font-size: 16px;
      // font-size: 32px;
      font-size: (32 / 2560) * 100vw;
      color: #494a4d;
    }
    .finish {
      // margin-right: 209px;
      // margin-right: 418px;
      margin-right: (418 / 2560) * 100vw;
    }
    .finish,
    .unfinish {
      display: flex;
      align-items: center;
    }
    .f_text,
    .unf_text {
      // margin-left: 8px;
      // margin-left: 16px;
      margin-left: (16 / 2560) * 100vw;
      .num {
        font-family: YouSheBiaoTiHei;
        // font-size: 48px;
        font-size: (48 / 2560) * 100vw;
      }
    }
    .f_text {
      .num {
        color: #05b1ac;
      }
    }
    .unf_text {
      .num {
        color: #f68330;
      }
    }
  }
  /deep/ .table_box {
    background: #fff;
    // margin-top: 12px;
    // margin-top: 24px;
    margin-top: (24 / 1600) * 100vh;
    .search_box {
      // padding: 16px;
      // padding: 32px;
      padding: (32 / 1600) * 100vh;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .left_item {
        display: flex;
      }
      .right_item {
        .search_btn,
        .reset_btn {
          // width: 168px;
          // height: 64px;
          // font-size: 32px;
          width: (168 / 2560) * 100vw;
          height: (64 / 1600) * 100vh;
          font-size: (32 / 2560) * 100vw;
          padding: (12 / 1600) * 100vh (20 / 2560) * 100vw;
        }
        .search_btn {
          background: #1890ff;
        }
        .reset_btn {
          border-color: #c2c4cc;
        }
      }
      .search_item {
        // width: 295px;
        // width: 590px;
        // margin-right: 12px;
        width: (590 / 2560) * 100vw;
        margin-right: (12 / 2560) * 100vw;
        .search_item_top {
          // font-size: 16px;
          // font-size: 32px;
          font-size: (32 / 2560) * 100vw;
          color: #494a4d;
          // margin-bottom: 8px;
          // margin-bottom: 16px;
          margin-bottom: (16 / 1600) * 100vh;
        }
        .el-input {
          // height: 32px;
          // height: 64px;
          // font-size: 32px;
          height: (64 / 1600) * 100vh;
          font-size: (32 / 2560) * 100vw;
          .el-input__inner {
            height: 100%;
          }
        }
        // .status_sel {
        //   // width: 295px;
        //   // width: 590px;
        //   // font-size: 32px;
        //   width: (590 / 2560) * 100vw;
        //   font-size: (32 / 2560) * 100vw;
        //   .el-input__icon {
        //     // line-height: 32px;
        //     // line-height: 64px;
        //     line-height: (64 / 1600) * 100vh;
        //   }
        // }
      }
    }
    .table_item .el-table__row--striped {
      .el-table__cell {
        background: rgba(24, 144, 255, 0.05);
      }
    }
    .table_item {
      .header_item {
        .header_title {
          // margin-bottom: 12px;
          margin-bottom: (12 / 1600) * 100vh;
        }
        .el-table__cell {
          color: #1f1f1f !important;
          // font-size: 16px;
          // font-size: 32px;
          font-size: (32 / 2560) * 100vw;
          background: rgba(24, 144, 255, 0.2);
        }
      }
    }
    .el-table__cell {
      // padding: 10px 0 !important;
      // padding: 37px 0 45px !important;
      padding: (37 / 1600) * 100vh 0 (45 / 1600) * 100vh !important;
    }
    .el-table .cell {
      // line-height: 32px;
      line-height: (32 / 1600) * 100vh;
    }
    .el-table__body-wrapper {
      // font-size: 32px;
      font-size: (32 / 2560) * 100vw;
    }
    .edit_btn {
      // width: 77px;
      // height: 32px;
      // width: 144px;
      // height: 64px;
      width: (144 / 2560) * 100vw;
      height: (64 / 1600) * 100vh;
      color: #1890ff;
      // font-size: 16px;
      // border-radius: 32px;
      // font-size: 32px;
      // border-radius: 64px;
      font-size: (32 / 2560) * 100vw;
      border-radius: (64 / 2560) * 100vw;
      background: #e8f4ff;
      border-color: #a3d3ff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .pagi_box {
      // margin-top: 12px;
      text-align: right;
      // padding: 24px 14px 16px 0;
      // font-size: 16px;
      // padding: 48px 28px 32px 0;
      // font-size: 32px;
      padding: (48 / 1600) * 100vh (28 / 2560) * 100vw (32 / 1600) * 100vh 0;
      font-size: (32 / 2560) * 100vw;
      color: #494a4d;
      .el-pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        .el-icon-arrow-right,
        .el-icon-arrow-left {
          // font-size: 24px;
          font-size: (24 / 2560) * 100vw;
        }
        .number {
          // width: 44px;
          // height: 44px;
          width: (44 / 2560) * 100vw;
          height: (44 / 1600) * 100vh;
          border: (1 / 2560) * 100vw solid #e1e2e5;
        }
        .active {
          border-color: #1890ff;
        }
        .el-pager li {
          // line-height: 44px;
          // font-size: 32px;
          line-height: (44 / 1600) * 100vh;
          font-size: (32 / 2560) * 100vw;
          background: #fff;
        }
        .el-icon-more,
        .el-icon-d-arrow-right {
          // width: 44px;
          // height: 44px;
          width: (44 / 2560) * 100vw;
          height: (44 / 1600) * 100vh;
        }
      }
      .el-pagination__jump {
        height: (44 / 1600) * 100vh;
        line-height: 2.75vh;
        margin-left: (8 / 2560) * 100vw;
        color: #494a4d;
        // font-size: 32px;
        // height: 44px;
        font-size: (32 / 2560) * 100vw;
      }
      .el-pagination .el-select .el-input {
        width: (100 / 2560) * 100vw;
      }
      .btn-prev,
      .btn-next {
        // width: 44px;
        // height: 44px;
        width: (44 / 2560) * 100vw;
        height: (44 / 1600) * 100vh;
        background: #fff;
      }
      .el-pagination__editor {
        // width: 96px;
        // height: 44px;
        width: (96 / 2560) * 100vw;
        height: (44 / 1600) * 100vh;
        .el-input__inner {
          width: 100%;
          height: 100%;
          // font-size: 32px;
          font-size: (32 / 2560) * 100vw;
        }
      }
      .el-pagination__sizes,
      .el-pagination__total {
        color: #494a4d;
        // font-size: 32px;
        font-size: (32 / 2560) * 100vw;
      }
      .el-pagination__sizes {
        // height: 44px;
        // margin-right: 16px;
        height: (44 / 1600) * 100vh;
        line-height: 2.75vh;
        margin-right: (16 / 2560) * 100vw;
      }
      .el-select--mini {
        // width: 167px;
        height: 100%;
        // font-size: 32px;
        width: (187 / 2560) * 100vw;
        font-size: (32 / 2560) * 100vw;
        .el-input--mini {
          width: 100% !important;
        }
        .el-input__inner {
          // width: 167px;
          // height: 44px;
          // font-size: 32px;
          width: (187 / 2560) * 100vw;
          height: (44 / 1600) * 100vh;
          font-size: (32 / 2560) * 100vw;
          padding-right: (25 / 2560) * 100vw;
        }
        .el-input__icon {
          line-height: (44 / 1600) * 100vh;
        }
      }
      .el-pager {
        font-weight: 400;
        color: #494a4d;
        .active {
          background-color: #fff;
          color: #1890ff;
          // border: 1px solid #1890ff;
          // border: 2px solid #1890ff;
        }
      }
    }
  }
}
</style>